<template>
  <view
    class="rights-page"
    :style="rightBgStyle"
  >
    <image
      class="bg-image"
      :src="`/pages/customer-center/static/rights/bg_${currentLevel + 1}.jpg`"
      mode="widthFix"
    />
    <uni-nav-bar
      :title="` `"
      color="#fff"
      left-icon="left"
      showMenuButtonWidth
      statusBar
      backgroundColor="transparent"
      :border="false"
      @clickLeft="$tools.back"
    />
    <user-banner :level="currentLevel" />
    <view class="right-card">
      <right-card
        v-if="rightLevels.length"
        :rightLevels="rightLevels"
        :current="currentLevel"
        @change="handleRightCardChange"
      />
    </view>
    <right-detail
      v-if="rightLevels.length"
      :rightLevels="rightLevels"
      :current="currentLevel"
    />
  </view>
</template>

<script>
import { mapState } from "vuex"
import UserBanner from "./components/UserBanner/UserBanner.vue"
import RightCard from "./components/RightCard/RightCard.vue"
import RightDetail from "./components/RightDetail/RightDetail.vue"
export default {
  name: "Rights",
  components: {
    UserBanner,
    RightCard,
    RightDetail
  },
  data() {
    return {
      currentLevel: 0
    }
  },
  computed: {
    ...mapState("user", ["rightLevels"]),
    rightBgStyle() {
      return `background-color: ${
        this.currentLevel + 1 == 4 ? "#342f2e" : "#fff"
      };`
    }
  },
  onLoad(options) {
    this.currentLevel = parseInt(options.level) || 0
  },
  methods: {
    handleRightCardChange(current) {
      this.currentLevel = current
    }
  }
}
</script>

<style lang="scss" scoped>
.rights-page {
  width: 100%;
  height: 100%;
  position: relative;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
}

.right-card {
  margin-top: -80rpx;
}
</style>
